<template>
  <div id="index-l">
    <div class="index-l-1 index-l-0" style="height: 24.4%">
        <ul class="index-ul">
            <div class="top-s">视频监控</div>
            <div class="set-con set-flex">
                <div class="chart-box">
                    <div class="chart-box-img1">
                        <ul class="chart-box-img1-ul">
                            <li class="chart-box-img1-li">
                                <div class="chart-box-img1-d">
                                    <span>1</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>2</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>3</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>4</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                            </li>
                            <li class="chart-box-img1-li">
                                <div class="chart-box-img1-d">
                                    <span>5</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>6</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>7</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                                <div class="chart-box-img1-d">
                                    <span>8</span>
                                    <div class="chart-box-img1-d-set">
                                        <img src="./img/34.jpg" />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="chart-box-img2" @click="chartBoxClick"><img src="./img/34.jpg" /></div>
                    <div class="tab-s">
                        <div class="scroll">
                            <table class="table-1">
                                <tr>
                                    <th class="td-1">序号</th>
                                    <th class="td-2">名称</th>
                                    <th class="td-3">位置</th>
                                </tr>
                            </table>
                            <list-scroll class="box" :speed="0.3">
                                <div class="list">
                                    <div class="item-s" v-for="(item,index) in dataList" :key="index">
                                        <div class="item-s-c td-1"> {{ item.id }} </div>
                                        <div class="item-s-c td-2"> {{ item.name }} </div>
                                        <div class="item-s-c td-3"> {{ item.location }} </div>
                                    </div>
                                </div>
                            </list-scroll>
                        </div>
                    </div>
                </div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0 set-bj" :style="{backgroundImage:'url(' + setBj + ')'}" style="height: 40.4%">
        <ul class="index-ul">
            <!-- <div class="top-s set-s">风险等级图</div> -->
            <div class="top-s set-s video-s">
                <span>{{ setTxt }}</span>  
                <div v-if="setTxt === 'Camera 01'" class="close-s" @click="setTxtClick">返 回</div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0" style="height: 32.4%">
        <ul class="index-ul">
            <div class="top-s">热项追踪</div>
            <div class="set-con set-flex">
                <div  class="chart-box chart-box-other">
                    <div class="tab-s">
                        <div class="scroll">
                            <table class="table-1">
                                <tr>
                                    <th class="td-1">设备名称</th>
                                    <th class="td-2">设备位置</th>
                                    <th class="td-3">报警等级</th>
                                    <th class="td-4">现场图片</th>
                                    <th class="td-5">现场视频</th>
                                </tr>
                            </table>
                            <list-scroll class="box" :speed="0.3">
                                <div class="list">
                                    <div class="item-s" v-for="(item,index) in dataListOther" :key="index">
                                        <div class="item-s-c td-1" style="padding-left: 15px;"> {{ item.name }} </div>
                                        <div class="item-s-c td-2"> {{ item.location }} </div>
                                        <div class="item-s-c td-3"> {{ item.level }} </div>
                                        <div class="item-s-c td-4" @click="imgClick(item.img)"> <img :src="item.img" /> </div>
                                        <div @click="videoClick(item.video)" class="item-s-c td-5"> <img :src="item.video" /> </div>
                                    </div>
                                </div>
                            </list-scroll>
                        </div>
                    </div>
                </div>
            </div>
        </ul>
    </div>
  </div>
</template>

<script>
import ListScroll from "./listScroll"
import riskBg from './img/video_cover.jpg'
import vidoeImg from './img/video.png'
import viewBj from './img/view-bj.png'
import newImg from './img/34.jpg'
export default {
  name: 'index-l',
  data() {
    return {
        setBj: viewBj,
        setTxt: '风险等级图',
        dataList: [
            {id:'1',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'2',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'3',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'4',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'5',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'6',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'7',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'8',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'9',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'10',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'11',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'12',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'13',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'14',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
            {id:'15',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
        ],
        dataListOther: [
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
        ],
    };
  },
  components: { ListScroll },
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },
    chartBoxClick(){
        this.setBj = newImg
        this.setTxt = 'Camera 01'
    },
    setTxtClick(){
        this.setBj = viewBj
        this.setTxt = '风险等级图'
    }
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
/*** 滚动条样式优化 */

#index-l{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .index-l-0{
        // margin-bottom: 10px;
        height: 32.7%;
    }
    .set-bj{
        width: 100%;
        // height: 100%;
        // background-image: url(./img/view-bj.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        .set-s{
            background: linear-gradient(to right, rgba($color: #153863, $alpha: 0.8) 0%, rgba($color: #153863, $alpha: 0) 100%)!important;
        }
    }
    .video-s{
        display: flex;
        // flex-direction: row;
        // justify-content: flex-start;
        align-items: center;
        .close-s{
            font-style: normal;
            padding: 2px 10px;
            background: rgba($color: #ecf5ff, $alpha: 0.3);
            border: 1px solid #b3d8ff;
            color: #FFFFFF;
            margin-left: 10px;
            cursor:pointer;
            font-weight: normal;
        }
    }
    .index-ul{
        background: rgba($color: #0F2F5C, $alpha: 0.2);
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 14px;
            font-style: oblique;
            background: rgba($color: #153863, $alpha: 0.4);
        }
        .chart-box-other{
            height: 90%!important;
            .tab-s{
                width: 100%!important;
                height: 98%!important;
                .td-1,.td-2,.td-3,.td-4,.td-5{
                    width: 20%!important;
                }
            }
        }
        .chart-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 99%;
            margin: 10px auto 0 auto;
            height: 78%;
            .chart-box-img1{
                width: 20%;
                height: 100%;
                .chart-box-img1-ul{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    li{
                        display: flex;
                        justify-content: space-between;
                        .chart-box-img1-d{
                            width: 24%;
                            .chart-box-img1-d-set{
                                width: 30px;
                                height: 30px;
                                overflow: hidden;
                                margin: auto;
                                img{
                                    display: block;
                                    width: auto;
                                    height: 100%;
                                }
                            }
                            span{
                                display: block;
                                width: 100%;
                                text-align: center;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            .chart-box-img2{
                width: 30%;
                height: 100%;
                overflow: hidden;
                cursor:pointer;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .tab-s{
                width: 48%;
                height: 100%;
                // margin: 10px auto 0 auto;
                overflow: hidden;
                .table-1{
                    position: relative;
                    width: 100%;
                    text-align: center;
                    background: rgba($color: #153863, $alpha: 0.4);
                    z-index: 1;
                    th{
                        text-align: center;
                        // width: 50%;
                    }
                }

                .td-1,.td-2,.td-3{
                    width: 30%;
                    height: 30px;
                    line-height: 30px;
                }
                .td-4,.td-5{
                    width: 20%;
                    img{
                        width: 20px;
                        height: 20px;
                        margin-top: 5px;
                    }
                }
                .box {
                    height: 300px;
                    .list {
                        width: 100%;
                        .item-s {
                            display: flex;
                            justify-content: space-between;
                            cursor: pointer;
                            &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                            color: rgb(21,136,170);
                            table-layout:fixed;
                            border-bottom: 1px solid rgb(21,136,189);
                            .item-s-c{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-align: center;
                                width: 30%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>